<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="标题">
        <el-input v-model="techObject.industryTitle" disabled/>
      </el-form-item>
      <el-form-item label="编者">
        <el-input v-model="techObject.industryWriter" disabled/>
      </el-form-item>
      <el-form-item label="摘要">
        <el-input v-model="techObject.industryAbstract" :rows="5" type="textarea" disabled/>
      </el-form-item>
      <el-form-item label="内容">
        <tinymce :height="300" v-model="techObject.industryContent" disabled/>
      </el-form-item>
      <!-- <el-form-item label="内容">
        <el-input v-model="techObject.industryContent" :rows="10" type="textarea" disabled/>
      </el-form-item> -->
      <!-- <el-form-item label="图片">
        <el-input v-model="techObject.industryPhoto" disabled/>
      </el-form-item> -->
      <el-form-item label="访问量">
        <el-input v-model="techObject.industryViews" disabled/>
      </el-form-item>
      <el-form-item label="来源">
        <el-input v-model="techObject.industrySource" disabled/>
      </el-form-item>

      <el-form-item label="类别">
        <el-select
          v-model="techObject.industryType"
          placeholder="选择类别" 
          size="medium"
          disabled>
          <el-option
            v-for="audit in newTypeList"
            :key="audit.id"
            :label="audit.name"
            :value="audit.id"/>
        </el-select>
      </el-form-item>

      <el-form-item label="审核状态">
        <el-select
          v-model="techObject.industryAuditStatus"
          placeholder="审核状态" 
          size="medium"
          disabled>
          <el-option
            v-for="audit in auditStatusList"
            :key="audit.id"
            :label="audit.name"
            :value="audit.id"/>
        </el-select>
      </el-form-item>

      <el-form-item label="发布状态">
        <el-select
          v-model="techObject.industryPublishStatus"
          placeholder="发布状态" 
          size="medium"
          disabled>
          <el-option
            v-for="audit in publishStatusList"
            :key="audit.id"
            :label="audit.name"
            :value="audit.id"/>
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间">
        <el-date-picker
          v-model="techObject.gmtCreate"
          type="datetime"
          placeholder="创建时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
          disabled
        />
      </el-form-item>

      <!-- <el-form-item label="修改时间">
        <el-date-picker
          v-model="techObject.gmtUpdate"
          type="datetime"
          placeholder="修改时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item> -->

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="update(3)">通过审核</el-button>
        <el-button :disabled="saveBtnDisabled" type="info" @click="update(4)">不通过审核</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
import techObjectApi from '@/api/tech/industry'
import Tinymce from '@/components/Tinymce' // 引入富文本组件

export default {
  // 声明组件
  components: { Tinymce },
  data() {
    return {
      auditStatusList:[ //0 未审核 1 预审核通过 2 预审核未通过 3 人工审核通过 4 人工审核未通过
        {
          id:0,
          name: '未经机审'
        },
        {
          id:1,
          name: '机审通过'
        },
        {
          id:2,
          name: '机审不过'
        },
        {
          id:3,
          name: '人审通过'
        },
         {
          id:4,
          name: '人审不过'
        }
      ],
      newTypeList: [
        {
          id:0,
          name: '科技'
        },
        {
          id:1,
          name: '交通'
        },
        {
          id:2,
          name: '健康'
        },
        {
          id:3,
          name: '农业'
        },
         {
          id:4,
          name: '旅游'
        }
      ],
      publishStatusList: [
        {
          id:0,
          name: '未发布'
        },
        {
          id:1,
          name: '已发布'
        },
      ],
      techObject: {},
      saveBtnDisabled: false // 保存按钮是否禁用,
    }
  },
  created() { // 页面渲染之前执行
    this.init()
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.getInfo(id)
      } else { // 路径没有id值，做添加
        // 清空表单
        this.techObject = {}
      }
    },
    getInfo(id) {
      techObjectApi.getById(id)
        .then(response => {
          this.techObject = response.data.item
        })
    },
    // 通过
    update(status) {
      this.techObject.industryAuditStatus = status
      techObjectApi.updateOne(this.techObject)
        .then(response => {
          // 提示信息
          this.$message({
            type: 'success',
            message: response.message
          })
          // 回到列表页面 路由跳转
          this.$router.push({ path: '/techIndustry/industry/list' })
        })
    }
  }
}
</script>
<style scoped>
  .tinymce-container {
    line-height: 29px;
  }
</style>
